<script lang="ts" setup>
import { reactive, ref, Ref } from "vue";
import JxudpDataSourceServiceApi from "@/api/modules/org/bean/jxudp-data-source";
import { IModelFormExpose } from "@whjxtech/jxtech-component";
const emit = defineEmits<{
  (e: "add-success", data: any, res: any): void; //保存成功回调
  (e: "update-success", data: any, res: any): void; //更新成功回调
}>();

const props = defineProps({
  /**主键值 */
  dataSourceId: String
});

const JxtechModelFormRef = ref();

const JxudpDataSourceFormData: Ref<any> = ref({
  dataSourceId: props.dataSourceId
});

const rules = {
  dataSourceId: [{ required: true, message: "请输入数据源名称", trigger: "blur" }],
  dataSourceDesc: [{ required: true, message: "请输入数据源描述", trigger: "blur" }],
  driverClass: [{ required: true, message: "请选择JDBC驱动", trigger: "change" }],
  connUrl: [{ required: true, message: "请输入连接字符串", trigger: "blur" }],
  userName: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
  password: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
  minPoolSize: [{ required: true, message: "请输入连接池最小数量", trigger: "blur" }],
  maxPoolSize: [{ required: true, message: "请输入连接池最大数量", trigger: "blur" }],
  initialPoolSize: [{ required: true, message: "请输入连接池初始化数量", trigger: "blur" }],
  dbCharSet: [{ required: true, message: "请输入数据库字符集", trigger: "blur" }],
  jndiName: [{ required: true, message: "请输入JNDI名称", trigger: "blur" }]
};
const JxudpDataSourceFormState = reactive({
  primaryKey: "dataSourceId",
  getJxtechModelFormExpose: (): IModelFormExpose => {
    return JxtechModelFormRef.value as IModelFormExpose;
  },
  /**新增成功 */
  onAddSuccess: (formData: any, res: any) => {
    emit("add-success", formData, res);
  },
  // 切换JDBC驱动
  handleJdbcChange: (val: any) => {
    let connUrl = "";
    if (val.indexOf("oracle") > -1) {
      connUrl = "jdbc:oracle:thin:@ip:1521:db";
    } else if (val.indexOf("mysql") > -1) {
      connUrl = "jdbc:mysql://ip:3306/db?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8&useSSL=false";
    } else if (val.indexOf("postgresql") > -1) {
      connUrl = "jdbc:postgresql://ip:5432/db";
    } else if (val.indexOf("phoenix") > -1) {
      connUrl = "";
    } else if (val.indexOf("sqlserver") > -1) {
      connUrl = "jdbc:sqlserver://ip:1433;DatabaseName=db";
    }

    JxudpDataSourceFormData.value.connUrl = connUrl;
  },
  disabled: true,
  newBeanFunction: () => {
    JxudpDataSourceFormState.disabled = false;
    return JxudpDataSourceServiceApi.add();
  },
  saveForm: () => JxudpDataSourceFormState.getJxtechModelFormExpose().save()
});

defineExpose({
  save: () => JxudpDataSourceFormState.getJxtechModelFormExpose().save()
});
</script>
<template>
  <jxtech-model-form
    ref="JxtechModelFormRef"
    :service-api="JxudpDataSourceServiceApi"
    :primary-key="JxudpDataSourceFormState.primaryKey"
    :form-data="JxudpDataSourceFormData"
    :rules="rules"
    :new-bean-function="JxudpDataSourceFormState.newBeanFunction"
    label-position="top"
    @add-success="JxudpDataSourceFormState.onAddSuccess"
  >
    <jxtech-basic-card title="主要配置">
      <template #titleExtra>
        <jxtech-save-button @click="JxudpDataSourceFormState.saveForm" v-auth="'org:xtpz:dsjygl:save'"> </jxtech-save-button>
        <JxtechBackButtonExt></JxtechBackButtonExt>
      </template>
      <el-row :gutter="24">
        <el-col :span="8">
          <jxtech-model-form-item label="数据源名称" prop="dataSourceId">
            <el-input
              placeholder="请输入数据源名称"
              :disabled="JxudpDataSourceFormState.disabled"
              v-model="JxudpDataSourceFormData.dataSourceId"
            ></el-input>
          </jxtech-model-form-item>
        </el-col>
        <el-col :span="8">
          <jxtech-model-form-item label="数据源描述" prop="dataSourceDesc">
            <el-input placeholder="请输入数据源描述" v-model="JxudpDataSourceFormData.dataSourceDesc"></el-input>
          </jxtech-model-form-item>
        </el-col>
        <el-col :span="8">
          <jxtech-model-form-item label="是否为JNDI" prop="jndi">
            <el-switch
              v-model="JxudpDataSourceFormData.jndi"
              inline-prompt
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否"
            />
          </jxtech-model-form-item>
        </el-col>
      </el-row>
      <jxtech-basic-card title="JDNI数据库配置" v-if="JxudpDataSourceFormData.jndi">
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="JNDI名称" prop="jndiName">
              <el-input placeholder="请输入JNDI名称" v-model="JxudpDataSourceFormData.jndiName"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </jxtech-basic-card>
      <jxtech-basic-card title="C3P0数据库配置" v-if="!JxudpDataSourceFormData.jndi">
        <el-row :gutter="24">
          <el-col :span="8">
            <jxtech-model-form-item label="JDBC驱动" prop="driverClass">
              <JxtechDictionarySelectExt
                placeholder="请选择JDBC驱动"
                code-item-id="DRIVER_CLASS"
                v-model="JxudpDataSourceFormData.driverClass"
                @change="JxudpDataSourceFormState.handleJdbcChange"
              ></JxtechDictionarySelectExt>
            </jxtech-model-form-item>
          </el-col>

          <el-col :span="8">
            <jxtech-model-form-item label="连接池初始化数量" prop="initialPoolSize">
              <el-input placeholder="请输入连接池初始化数量" v-model="JxudpDataSourceFormData.initialPoolSize"> </el-input>
            </jxtech-model-form-item>
          </el-col>

          <el-col :span="8">
            <jxtech-model-form-item label="用户名称" prop="userName">
              <el-input placeholder="请输入用户名称" v-model="JxudpDataSourceFormData.userName"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <jxtech-model-form-item label="连接池最小数量" prop="minPoolSize">
              <el-input placeholder="请输入连接池最小数量" v-model="JxudpDataSourceFormData.minPoolSize"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="8">
            <jxtech-model-form-item label="连接池最大数量" prop="maxPoolSize">
              <el-input placeholder="请输入连接池最大数量" v-model="JxudpDataSourceFormData.maxPoolSize"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="8">
            <jxtech-model-form-item label="用户密码" prop="password">
              <el-input placeholder="请输入用户密码" v-model="JxudpDataSourceFormData.password"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24"> </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="连接字符串" prop="connUrl">
              <el-input placeholder="请输入连接字符串" v-model="JxudpDataSourceFormData.connUrl"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </jxtech-basic-card>
      <jxtech-basic-card title="扩展配置">
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="数据库字符集" prop="dbCharSet">
              <JxtechDictionarySelectExt
                placeholder="请选择数据库字符集"
                code-item-id="DB_CHAR_SET"
                v-model="JxudpDataSourceFormData.dbCharSet"
              >
              </JxtechDictionarySelectExt>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="数据库SCHEMA" prop="dbShecma">
              <el-input placeholder="请输入数据库SCHEMA" v-model="JxudpDataSourceFormData.dbShecma" />
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </jxtech-basic-card>
    </jxtech-basic-card>
  </jxtech-model-form>
</template>
